<!--  -->
<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div style="text-align: end">
        <Toolbar :items="[
            `查询`, '新增', '删除',]" @select="cx" @add="adds" @del="delSles">
        </Toolbar>
      </div>
    </template>
    <template #pageTabel>
      <a-spin :loading="form.pageLoading" tip="加载中" dot style="height:100%;width: 100%;z-index:999 ;">
        <div style="width: 100%; height: 100%">
          <encapsulation-agrid ref="table1Ref" :configaggrid="configTable1"></encapsulation-agrid>
        </div>
      </a-spin>
    </template>
    <a-drawer style="z-index: 999" ok-text="保存" cancel-text="关闭" :drawer-style="{ zIndex: 9999 }"
              :mask-closable="false"
              :width="400" :visible="pageData.showAdd" unmountOnClose @ok="sideOk" @cancel="pageData.showAdd = false">
      <template #title>
        {{ pageData.sideTitle }}
      </template>
      <div>
        <a-form ref="formRef" layout="horizontal" :model="dataForm">
          <a-form-item label-col-flex="80px" label="寸数" field="cunCount"
                       :rules="[{ required: true, message: '寸数必填' }]"
                       :validate-trigger="['change', 'blur']">
            <a-input class="bacClass" placeholder="" v-model="dataForm.cunCount"/>
          </a-form-item>
          <a-form-item label-col-flex="80px" label="订单机型" field="machineType"
                       :rules="[{ required: true, message: '订单机型必填' }]" :validate-trigger="['change', 'blur']">
            <a-select popup-container="html" class="bacClass" v-model="dataForm.machineType" allow-clear
                      @click="mtClick">
              <a-option v-for="item in mtList" :value="item.detailName">
                {{ item.detailName }}
              </a-option>
            </a-select>
          </a-form-item>
          <a-form-item label-col-flex="80px" label="总路数" field="totalWayCount"
                       :rules="[{ required: true, message: '总路数必填' }]" :validate-trigger="['change', 'blur']">
            <a-input-number class="bacClass" placeholder="" v-model="dataForm.totalWayCount"/>
          </a-form-item>
        </a-form>
      </div>
    </a-drawer>
  </pageTabelLayout>
</template>

<script lang='ts' setup>
import {reactive, toRefs, ref, onMounted} from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import {post, get} from '@/api/http'
import {Message, Modal} from '@arco-design/web-vue'

import {localeText} from '@/api/aggridZw'
import {pagingList} from '@/api/paging'
import PageTabelLayout from "@/components/pageTabelLayout.vue";

const table1Ref = ref<any>(null)
const tableColumns: any = [
  {
    title: "寸数",
    key: "cunCount",
    dataIndex: "cunCount",
    width: 150,
  },
  {
    title: "机型",
    key: "machineType",
    dataIndex: "machineType",
    width: 150,
  },
  {
    title: "总路数",
    key: "totalWayCount",
    dataIndex: "totalWayCount",
    width: 150,
  },
  {
    title: "创建人",
    key: "createName",
    dataIndex: "createName",
    width: 150,
  },
  {
    title: "创建时间",
    key: "createTime",
    dataIndex: "createTime",
    width: 150,
  },
  {
    title: "操作",
    key: "alites",
    dataIndex: "alites",
    slotName: 'alites',
    width: 80,
    fixed: 'right'
  }
]
let tc: any[] = tableColumns.map((o: any) => {

  let obj = {
    headerName: o.title,
    field: o.key,
    pinned: o['fixed'],
  }
  if (o.key === 'alites') {
    obj['resizable'] = false
    obj['filter'] = false
    obj['sortable'] = false
    obj["lockPosition"] = "right"
    obj['width'] = 100
    obj['cellRenderer'] = {
      template: `
        <el-button style="color:#165dff;" link @click="a1">修改</el-button>`,
      setup(props: any) {
        const a1 = () => {
          for (let item in props.params.data) {
            dataForm[item] = props.params.data[item]
          }
          pageData.showAdd = true
          pageData.sideTitle = '修改'
        }
        return {
          a1,
        }
      }

    }
  }
  return obj
})
tc.unshift({
  showRowGroup: 'hide_def',
  headerName: "",
  "checkboxSelection": true,
  "headerCheckboxSelection": true,
  "pinned": "left",
  "width": 50,
  resizable: false,
  filter: false,
  sortable: false,
  minWidth: 50,
  maxWidth: 50,
  lockPosition: "left",
})
let configTable1 = {
  url: 'product/GreyWay/getPage', //接口路径
  queryData: {
    //接口参数
  },
  paginationShow: true, //分页是否显示
  invokeiIterface: true, //是否调用接
  rowMultiSelectWithClick: true, //点击行是否多选
  column: tc,
  fileName: 'zblsSetting-1'
}

const pagingList1: any = ref(pagingList)
const localeText1: any = ref(localeText)

const form: any = reactive({})

const defaultColDef: any = {
  sortable: true,
  resizable: true,
  filter: true,
  flex: 1
}
const gridOption = ref()
const colState = ref()
const gridReady = (params: any) => {
  gridOption.value = params.api
  colState.value = params.columnApi
}

const total = ref(0);
const page = ref(1);
const size = ref(10);

function PageSize(val: any) {
  page.value = val
  doRefresh();
}

function change1(val: any) {
  size.value = val
  doRefresh();
}

const dataList: any = ref([])

function doRefresh() {
  table1Ref.value.setQuery()
}


const cx = () => {
  page.value = 1
  doRefresh()
}

onMounted(() => {
  pageData.rHeight = document.getElementsByClassName("main-section")[0]?.clientHeight
  //弹出层的高
  if (pageData.rHeight !== undefined) {
    pageData.rHeight = pageData.rHeight;
  }
  doRefresh()
})
const pageData = reactive({
  showAdd: false,
  rHeight: 0,
  showAdd: false,
  sideTitle: '新增'
})

const dataForm: any = reactive({
  cunCount: '',
  machineType: '',
  totalWayCount: '',
})
const adds = () => {
  for (let item in dataForm) {
    dataForm[item] = ''
  }
  pageData.showAdd = true
  pageData.sideTitle = '新增'
}

const formRef = ref()

const sideOk = () => {
  formRef.value?.validate().then((err) => {
    if (!err) {
      if (pageData.sideTitle == '新增') {
        post({
          url: 'product/GreyWay/insert',
          data: [
            {
              cunCount: dataForm.cunCount,
              machineType: dataForm.machineType,
              totalWayCount: dataForm.totalWayCount,
            }
          ]
        }).then(({code, message}) => {
          if (code == 200) {
            Message.success('成功')
            pageData.showAdd = false
            doRefresh()
          } else {
            Message.error(message)
          }
        })
      } else {
        post({
          url: 'product/GreyWay/update',
          data: [{
            id: dataForm.id,
            cunCount: dataForm.cunCount,
            machineType: dataForm.machineType,
            totalWayCount: dataForm.totalWayCount,
          }]
        }).then(({code, message}) => {
          if (code == 200) {
            Message.success('成功')
            pageData.showAdd = false
            doRefresh()
          } else {
            Message.error(message)
          }
        })
      }
    }
  })
}

const delSles = () => {
  if (table1Ref.value.getSelectedRows().length == 0) {
    Message.error('请勾选数据')
    return false
  }
  Modal.confirm({
    title: '系统提示',
    content: '确认删除选中的数据?',
    onOk: () => {
      post({
        url: 'product/GreyWay/delete',
        data: table1Ref.value.getSelectedRows().map((res: any) => res.id),
      }).then((res: any) => {
        if (res.code == 200) {
          Message.success('删除成功')
          doRefresh()
        } else Message.error(res.message)
      })
    },
  })
}

const mtList = ref()

const mtClick = () => {
  post({
    url: 'dict/dictTypeDetail/getListByCodeType?codeType='+46,
  }).then(({data}) => {
    mtList.value = data
  })
}

</script>
<style lang='less' scoped>
:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>